<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增菜品</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-suffix=":">
        <el-form-item label="菜品名称" prop="foodName">
          <el-input v-model="addForm.foodName"></el-input>
        </el-form-item>
        <el-form-item label="菜品价格" prop="foodPrice">
          <el-input v-model="addForm.foodPrice"></el-input>
        </el-form-item>
        <el-form-item label="口味">
          <el-input v-model="addForm.foodTaste"></el-input>
        </el-form-item>
        <el-form-item prop="menuID" label="菜单分类">
          <el-select
            v-model="addForm.menuID"
            placeholder="请选择菜单分类"
          >
            <el-option
              v-for="item in menuCates"
              :key="item.menuID"
              :label="item.menuName"
              :value="item.menuID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜品描述">
          <el-input v-model="addForm.foodText"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            :action="uploadUrl"
            :on-preview="handlePreview"
            :on-success="unploaded"
            multiple
            :limit="1"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传一个jpg/png文件</div>
          </el-upload>
        </el-form-item>
        <el-button type="primary" @click="submitAdd">提交</el-button>
      </el-form>
    </el-card>
    <!-- 预览图片的对话框 -->
    <el-dialog
      title="预览图片"
      :visible.sync="showImgDialogVisible"
      width="50%"
    >
    <img :src="addForm.foodImage" class="previewPic">
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    //定义价格规则
    var checkPrice = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
          if (!Number(value)) {
            return callback(new Error('请输入数字值'));
          } 
      };
    return {
      addForm: {
        foodName: "",
        foodPrice: "",
        foodMenu: "",
        foodText: "",
        foodTaste: "",
        foodImage: "",
        menuID: "",
        foodSales: 0,
        foodNum: 500
      },
      addFormRules: {
        foodName: [
          { required: true, message: "请输入菜品名称", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
        ],
        foodPrice: [{ validator: checkPrice, trigger: 'blur' }],
        menuID: [
          { required: true, message: "请选择菜单分类", trigger: "change" }
        ]
      },
      // 菜单分类列表
      menuCates: [],
      //图片上传地址
      uploadUrl: "http://47.107.82.159:18081/food/img",
      //预览图片对话框
      showImgDialogVisible: false
    }
  },
  created() {
    this.getMenuCateList()
  },
  methods: {
    //获取菜单分类列表
    async getMenuCateList() {
      const { data: res } = await this.$http.get("menu")
      this.menuCates = res.data
    },
    //点击图片预览功能
    handlePreview() {
      this.showImgDialogVisible = true
    },
    //上传 成功的钩子
    unploaded(res) {
      this.addForm.foodImage = res
      console.log('res: ', res);
    },
    //提交表单
    async submitAdd() {
        const { data: res } = await this.$http.post('food',this.addForm)
        console.log('res: ', res);
          this.$message({
          message: '提交菜品成功',
          type: 'success'
        });
        this.$router.go(0)
      
    }
  }
}
</script>
<style lang="less" scoped>
.food_class {
  color: rgb(48, 49, 51);
}
.el-tag {
  margin: 0 8px;
}
.previewPic {
  width: 100%;
}
</style>
